import React, { FC} from 'react';
import { Text, View,Button,Image } from '@ray-js/ray';
import styles from './index.module.less';
import ball from '../../assets/images/tab/ball.png';
declare module '*.png';
type Props = {
  visible: boolean;
  day:number;
  meet_times:number;
  first_meet:string;
  lately_meet:string;
  Name:string;
  userName:string;
  onClose?: () => void;
  onSend?: () => void;
};
const Popup: FC<Props> = ({ 
  Name,
  userName,
  lately_meet,
  first_meet,
  visible = false,     
  day=1,
  meet_times=1,
  onClose,
  onSend,
}) => {

  const close =()=>{
    onClose();
  }

  const send=()=>{
    onClose();
    onSend();
  }
    return (
        <>
          { visible &&
            <View className={styles.container}>
              <Image src={ball} className={styles.ball} />

              <Text className={styles.name}>{userName}的{Name}</Text>

              <View className={styles.meet_time}>
                <Text className={styles.meet_time_font}>相遇{meet_times}次</Text>
              </View>

              <Text className={styles.first_meet}>第一次相遇时间:\u00A0\u00A0{first_meet}</Text>
              <Text className={styles.lately_meet}>最近一次相遇时间:\u00A0\u00A0{lately_meet}</Text>

              <Button className={styles.close} onClick={close}>x</Button>
              <Button className={styles.send} onClick={send}>发消息</Button>
            </View>  
            }


          <View className={styles.mask}/>
        </>
      );
}

export default Popup;
